<template>
  <div class="all-bill-box">
    <div class="bill-add">
      <el-button
          type="success"
          @click="showCreate"
          v-if="userInfo.root === 0 || userInfo.root === 1"
      >
        +创建项目
      </el-button>
    </div>
    <div class="bill-table">
      <div class="table_box">
        <el-table
            :data="tableDate"
            stripe
            style="width: 98%;height: 88vh"
            border
            max-height="88vh"
            empty-text="暂无数据"
        >
          <el-table-column type="index" width="100" align="center"/>
          <el-table-column
              prop="project_name"
              label="项目名"
              width="500"
              align="center"
          />
          <el-table-column
              prop="charge_person_name"
              label="负责人"
              align="center"
              width="200"
          />
          <el-table-column
              prop="first_party"
              label="甲方对接人"
              width="200"
              align="center"
          />
          <el-table-column
              label="创建时间"
              width="250"
              align="center"
          >
            <template #default="{row}">
              {{computeDate(row.created_at)}}
            </template>
          </el-table-column>
          <el-table-column
              label="操作"
              align="center"
          >
            <template #default="{row}">
              <el-button
                  size="small"
                  @click="updatePro(row.project_id)"
              >
                编辑项目
              </el-button>
              <el-button
                  type="primary"
                  size="small"
                  @click="showBill(row.project_id)"
              >
                报销明细
              </el-button>
              <el-button
                  type="danger"
                  size="small"
                  @click="delProject(row.project_id)"
              >
                删除项目
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>

  <CreateProject ref="createRef" @reloadList = getProList />
  <CheckProjectBill ref="checkBill" @reloadList = getProList />
  <UpdateProDialog ref="updateRef" @reloadList = getProList />
  <ConfirmDIalog ref="delRef" @reloadList = getProList />
</template>

<script setup>
import {ElButton, ElMessage, ElTable, ElTableColumn, } from "element-plus"
import {onMounted, ref} from "vue"
import CreateProject from "@/components/Project/CreateProject.vue"
import CheckProjectBill from "@/components/Project/CheckProjectBill.vue"
import {computeDate} from "@/lib/utils.js"
import {delPro, get_pro_list} from "@/api/Project/index.js"
import emitter from "@/lib/eventBus.js"
import UpdateProDialog from "@/components/Project/UpdateProDialog.vue"
import ConfirmDIalog from "@/components/Project/ConfirmDIalog.vue"

let userInfo = JSON.parse(localStorage.getItem('syhyDocManSys'))

const tableDate = ref([])

const createRef = ref()
const checkBill = ref()
const updateRef = ref()
const delRef = ref()

onMounted(()=>{
  getProList()
  emitter.emit('home_menu','pro')
})

const getProList = async () => {
  try {
    const {data:res} = await get_pro_list()
    if (res.code === 200){
      tableDate.value = res.data
    } else if (res.code === 201){
      return ElMessage({
        message:'暂无数据',
        type:'info'
      })
    } else {
      return ElMessage({
        message:'获取列表失败!',
        type:'error'
      })
    }
  } catch (e) {
    console.log(e)
  }
}

const showCreate = () => {
  createRef.value.show()
}

const checkBillDetail = (id) => {

}

const showBill = (id) => {
  checkBill.value.showBills(id)
  checkBill.value.getBillList(id)
}

const updatePro = (id) => {
  updateRef.value.showDia(id)
}

const delProject = async (id) => {
  delRef.value.showDel(id)
}
</script>

<style scoped lang="less">
.all-bill-box{
  box-sizing: border-box;
  padding: 0 1vh;
  border: 1px solid lightgray;
  margin-left: 8.5vw;
  margin-top: 2vh;
  width: 91vw;
  height: 96.5vh;
  background-color: #fff;
  border-radius: 15px;
  box-shadow: 0 0 7px 7px lightgray;
  .bill-add{
    margin-top: 1vh;
    height: 5vh;
    line-height: 5vh;
    text-align: left;
    padding-left: 1vw;
  }
  .bill-table{
    .table_box{
      width: 92vw;
    }
  }
}
</style>